<template>
  <div class="bid-item" id="bind-model-1">
    <p>{{ message }}</p>
    <p>{{ messageWatch }}</p>
    <p>reversedMessage: {{ reversedMessage }}</p>
    <input v-model="message">
    <p>me_Test: {{ me_Test() }}</p>
    <p>message_too: {{ message_too }}</p>
    <input v-model="message_too">
    <div>
      <button @click="controllIF" >点击控制轮换显示</button>
      <div v-if="showIF === 1">true</div>
      <div v-else-if="showIF === 2">2</div>
      <div v-else-if="showIF === 3">3</div>
      <div v-else-if="showIF === 4">4</div>
      <div v-else-if="showIF === 5">5</div>
      <div v-else-if="showIF === 6">6</div>
      <div v-else>false</div>
    </div>
    <div>
      <p>以下是添加和删除item的示例</p>
      <input v-model="newItem" placeholder="请输入文本"></input>
      <button v-on:click="addItem">添加</button>
    </div>
    <transition-group tag="ul" name="li">
      <LiItem v-bind:key="index" v-for="(item, index) in list" v-bind:title="item" v-on:remove="list.splice(index, 1)">
      </LiItem>
    </transition-group>
    <div class="static" v-bind:class="{ active: isActive, 'div-danger': hasError}" @click="changeColor">object形式的样式
    </div>
    <div class="static" v-bind:class="[activeClass, errorClass]">数组形式的样式
    </div>
    <div v-bind:style="styleObject">绑定内联样式
    </div>
  </div>
</template>

<script>
  import LiItem from '../components/liItem.vue'

  export default {
    data() {// 必须要有一个data方法，然后return数据
      return {
        message: 'hell moto!',
        message_too: 'message_too',
        messageWatch: 'watched',
        showIF: 1,
        list: ["aa", "bb", "cc"],
        newItem:'',
        isActive: false,
        hasError: true,
        activeClass: 'active',
        errorClass: 'div-danger',
        styleObject: {
          color: 'green',
          fontSize: '24px'
        }
      }
    },
    components: { // 引入新组件,test
      LiItem
    },
    beforeCreate(){// 生命周期，第一步： 创建前
      console.log("beforeCreate")
    },
    created(){// 生命周期，第二步：创建后
      console.log("created")
    },
    beforeMount(){// 生命周期，第三步：挂载组件前
      console.log('beforeMount')
    },
    mouted(){// 生命周期，第四步：组件创建vm.$el，并且把html中的el用本组件替换后
      console.log('mouted')
    },
    beforeUpdate(a){// 生命周期，更新流程：更新前。居然没有参数。。。
      console.log(this.message)
      console.log(a)
      console.log('beforeUpdate')
    },
    updated(b){// 生命周期，更新流程：更新后。居然没有参数。。。
      console.log(this.message)
      console.log(b)
      console.log('updated')
    },
    beforeDestroy(){// 生命周期，最后一步：组件销毁前
      console.log('beforeDestroy')
    },
    computed: {// 这里是一个属性～计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
      // a computed getter
      reversedMessage() {
        // `this` points to the vm instance
        return this.message.split('').reverse().join('') + new Date()
      },
    },
    methods:{
      me_Test(){// 每次data的属性有改变都会执行一遍
        return this.message + ' ' + Math.random() * 100 + new Date()
      },
      controllIF(){
        this.showIF = ++this.showIF;
      },
      addItem(){
        this.list.push(this.newItem);
      },
      changeColor(){
        // 这里是研究promise的异步请求
        // let doSth = new Promise((resolve, reject) => {
        //   console.log('hello');
        //   resolve();
        // });

        // setTimeout(() => {
        //   doSth.then(() => {
        //     console.log('over');
        //   })
        // }, 10000);

        // 判断控制台的输出
        // setTimeout(function() {
        //   console.log(1)
        // }, 0);
        // new Promise(function executor(resolve) {
        //   console.log(2);
        //   for( var i=0 ; i<10000 ; i++ ) {
        //     i == 9999 && resolve();
        //   }
        //   console.log(3);
        // }).then(function() {
        //   console.log(4);
        // });
        // console.log(5);

        this.isActive = !this.isActive;
      }
    },
    watch: {
      message(val) {
        this.messageWatch = 'watched: ' + val
      }
    }
  }
</script>

<style lang="stylus">
  .bid-item
    background-color #fff
    padding 20px 30px 20px 80px
    border-bottom 1px solid #eee
    position relative
    div
      line-height 20px
  .static
    background-color #0f0
    padding 20px 20px
    height 100px
  .active
    background-color #f00
  .div-danger
    color white
</style>